<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no,viewport-fit=cover" />
		<title>用户中心</title>
		<link rel="stylesheet" type="text/css" href="css/hui.css" />
		<link rel="stylesheet" type="text/css" href="css/my.css" />
		<style>
			div{overflow:hidden;}
			.item_div {
				height: 60px;
				display: flex;
				flex-direction: row;
				align-items: center;
			}
			
			.item_div img {
				width: 24px;
				height: 24px
			}
			
			.item_div div {
				height: 59px;
				display: flex;
				flex-direction: row;
				align-items: center;
				flex-grow: 1;
				border-bottom: #E1E1E1 1px solid;
			}
			
			.item_box_p1 {
				line-height: 60px;
				padding-left: 10px;
				color: #666666;
			}
			
			.item_box_p2 {
				line-height: 60px;
				flex-grow: 1;
				text-align: right;
				padding-right: 10px;
				color: #666666;
			}
			
			.hui-icons {
				color: #666666;
			}
			.hui-wrap{
				    padding-top: 70px;
			}
		</style>
	</head>

	<body>
		<div style="height: 22px;width: 100%;background: #464646;position: fixed;top: 0;"></div>
		<header class="hui-header" style="top: 0px;height: 50px; max-height: 50px; background: #464646;">
			<div id="hui-back" style="line-height: 50px;"></div>
			<h1 style="line-height: 50px;">用户中心</h1>
			<div id="hui-right" style="line-height: 50px;"></div>
		</header>
		<div class="hui-wrap" id="datas">
			<div class="hui-list" style="background:#FFFFFF; margin-top:0px;">
				<a id="Filedata" onclick="showActionImg(this)" style="height:auto; height:80px; padding-bottom:8px;">
					<div class="hui-list-icons" style="width:110px; height:80px;">
						<img :src="getHeader(user.avatar)" onerror="this.src='img/user.png'" style="width:66px; height: 66px; margin:0px; border-radius:50%;object-fit: cover;" />
					</div>
					<div class="hui-list-text" style="height:79px; line-height:79px;">
						<div class="hui-list-text-content" v-html="user">

						</div>
						<div class="hui-list-info">
							<span class="hui-icons hui-icons-right"></span>
						</div>
					</div>
				</a>
				<!--<a href="javascript:hui.toast('Hello Hcoder UI !');">
					<div class="hui-list-text" id="email">
						账户余额 : 1000元 | 积分 : 2000
					</div>
				</a>--> 
			</div>
			<div class="hui-list" style="background:#FFFFFF; margin-top:16px;">

				<div onclick="changeEmail()" class="item_div">
					<p style="width: 10px;"></p>
					<img src="img/email.png" style="" />
					<p style="width: 10px;"></p>
					<div>
						<p class="item_box_p1">电子邮箱</p>
						<p v-html="user.email" class="item_box_p2" id="email">1</p>
						<span class="hui-icons hui-icons-right"></span>
					</div>
				</div>

				<div onclick="changeMobile()" class="item_div">
					<p style="width: 10px;"></p>
					<img src="img/mobile.png" style="" />
					<p style="width: 10px;"></p>
					<div>
						<p class="item_box_p1">电话号码</p>
						<p v-html="user.mobile" class="item_box_p2" id="mobile">1</p>
						<span class="hui-icons hui-icons-right"></span>
					</div>
				</div>

				<div onclick="changeBirthday()" class="item_div">
					<p style="width: 10px;"></p>
					<img src="img/birthday.png" style="" />
					<p style="width: 10px;"></p>
					<div style="border: none;">
						<p class="item_box_p1">生日</p>
						<p v-html="birthday(user.birthday)" class="item_box_p2" id="birthday">1</p>
						<span class="hui-icons hui-icons-right"></span>
					</div>
				</div>

			</div>

			<div class="hui-list" style="background:#FFFFFF; margin-top:16px; display: none;">
				<div onclick="setSensor()" class="item_div">
					<p style="width: 10px;"></p>
					<img src="img/set_1.png" style="" />
					<p style="width: 10px;"></p>
					<div style="border: none;">
						<p class="item_box_p1" style="flex-grow: 1;">设置网关</p>

						<span class="hui-icons hui-icons-right"></span>
					</div>
				</div>

			</div>

			<div id="update" class="hui-list" style="background:#FFFFFF; margin-top:16px;display: none;">
				<div onclick="update()" class="item_div">
					<p style="width: 10px;"></p>
					<img src="img/update.png" style="" />
					<p style="width: 10px;"></p>
					<div style="border: none;">
						<p class="item_box_p1" style="flex-grow: 1;">系统更新</p>
						<p class="item_box_p2" id="version">1</p>
						<span class="hui-icons hui-icons-right"></span>
					</div>
				</div>
			</div>

			<div style="background:#FFFFFF; margin-top:28px;">
				<button type="button" class="hui-button hui-button-large" style="color:red" onclick="loginOut()">
        	<span class="hui-icons hui-icons-logoff" style="color:red"></span>退出系统
       	</button>
			</div>
		</div>
		<script type="text/javascript" src="js/func/hui.js" charset="UTF-8"></script>
		<script type="text/javascript" src="js/func/vue.min.js" charset="UTF-8"></script>
		<script type="text/javascript" src="js/func/jq.js" charset="UTF-8"></script>
		<script type="text/javascript" src="js/obj/my.js" charset="UTF-8"></script>
		<script type="text/javascript" src="js/obj/update.js" charset="UTF-8"></script>

		<script>
			var isSaved = false;

			hui.ready(function() {
				printLog(datas.user);
				console.log(localStorage.getItem("loginName"));

				hui.plusReady(function() {

					getVersion(function(v) {
						hui("#version").html(v);
						hui("#update").show();
					})

				});
			});
			var datas = new Vue({
				el: '#datas',
				data: {
					user: localStorage.getItem("loginName")
				},
				methods: {

					getHeader: function(avater) {
						console.log('header:' + avater)
						if(!avater || avater.length == 0) {
							return "img/head_icon.png";
						} else {
							printLog(baseURL() + avater);
							console.log(baseURL() + avater)
							return baseURL() + avater;
						}
					},
					birthday: function(birthday){
						//return birthday.substring(0,10);
					}

				}
			});

			function setInfo() {

			}

			function changeEmail() {
				hui.prompt('请输入您的邮箱地址？', ['取消', '确定'], function(name) {
					if(name != datas.user.email) {
						datas.user.email = name;
						save();
					}

				}, '例如 : xxxx@xxx.com', datas.user.email, function() {
					console.log('您点击了取消')
				});
			}

			function changeMobile() {
				hui.prompt('请输入您的电话号码？', ['取消', '确定'], function(name) {
					if(name != datas.user.mobile) {
						datas.user.mobile = name;
						save();
					}
				}, '请输入电话号码', datas.user.mobile, function() {
					console.log('您点击了取消')
				});
			}

			function changeBirthday() {
				hui.prompt('请输入您的生日日期？', ['取消', '确定'], function(name) {
					if(name != datas.user.birthday) {
						
						datas.user.birthday = name;
						save();
					}
				}, '请输入生日日期', datas.user.birthday.substring(0,10), function() {
					console.log('您点击了取消')
				});
			}

			function save(isPic) {

				hui.loading("正在保存用户信息...");

				var url = baseURL() + "/users_handler.ashx?action=user_edit";

				postByJson(url, datas.user, function(ret) {
					printLog(ret, "栏目");
					hui.toast(isPic ? "更新用户头像成功!" : "保存用户信息成功!");

					isSaved = true;
					datas.user = ret.data;
					localStorage.setItem("loginInfo", JSON.stringify(ret.data));

					refreshMain();

				});

			}

			function update() {
				if(!window.plus) {
					return;
				}

				checkUpdate(false);
			}

			function refreshMain() {
				if(!window.plus) {
					return;
				}

				var views = hui.allViews();
				for(var k = 0; k < views.length; k++) {
					var selfW = views[k];
					if(selfW.id.indexOf("main_R.html") >= 0 || selfW.id == plus.runtime.appid || selfW.id == 'HBuilder') {
						printLog(selfW, "主界面");
						selfW.evalJS("refresh();");
					}
				}
			}

			function loginOut() {
				
				hui.confirm('您确定要退出当前账号？', ['取消', '确定'], function(name) {
					
					localStorage.removeItem("loginInfo");
					localStorage.removeItem("loginId");
					localStorage.removeItem("refresDate");
					
					var views = hui.allViews();
					console.log(JSON.stringify(views));
					for(var j = 0; j < views.length; j++) {
						var selfW = views[j];
						if(selfW.id.indexOf("main_New.html") >= 0) {
							hui.close(selfW.id);
						}
						if(selfW.id.indexOf("China_Map.html") >= 0) {
							hui.close(selfW.id);
						}
						if(selfW.id.indexOf("Province_Map.html") >= 0) {
							hui.close(selfW.id);
						}
						if(selfW.id.indexOf("addount.html") >= 0) {
							hui.close(selfW.id);
						}
					}
				
					setTimeout(function() {  
						
						hui.open("index.html", {}, true, {});
						hui.close('addount.html');
					}, 100)			
					
				
				}, function() {
					console.log('您点击了取消')
				});

				//}

				//				var views = hui.allViews();
				//				for(var k = 0; k < views.length; k++) {
				//					printLog(views[k]);
				//					var selfW = views[k];
				//					if(selfW.id == plus.runtime.appid || selfW.id == 'HBuilder') {
				//
				//					} else {
				//						plus.webview.close(selfW, 'slide-out-right');
				//					}
				//				}
			}

			var fileUrlPerson;
			var actionUrl;
			var fileName;

			function showActionImg(conf) {
				var divid = conf.id || "AKG";
				var actionbuttons = [{
					title: "拍照"
				}, {
					title: "相册选取"
				}];
				var actionstyle = {
					title: "选择照片",
					cancel: "取消",
					buttons: actionbuttons
				};
				plus.nativeUI.actionSheet(actionstyle, function(e) {
					if(e.index == 1) {
						getImagePerson(divid);
					} else if(e.index == 2) {
						galleryPersonImg(divid);
					}
				});
			}

			// 拍照  
			function getImagePerson(divid) {
				var cmr = plus.camera.getCamera();
				cmr.captureImage(function(p) {
					plus.io.resolveLocalFileSystemURL(p, function(entry) {
						//printLog("-----------" + entry.toLocalURL() + "--------")
						fileUrlPerson = entry.toLocalURL();
						fileName = fileUrlPerson.split("/")[fileUrlPerson.split("/").length - 1];
						printLog(fileUrlPerson, "拍照后保存的地址");
						compressImage(entry.toLocalURL(), entry.name, divid);

					}, function(e) {
						plus.nativeUI.toast("读取拍照文件错误:" + e.message);
					});
				}, function(e) {}, {
					filename: "_doc/camera/",
					index: 1
				});
			}

			function galleryPersonImg(divid) {
				plus.gallery.pick(function(e) {
					var zm = 0;
					setTimeout(file, 200);

					function file() {
						plus.io.resolveLocalFileSystemURL(e.files[zm], function(entry) {
							fileUrlPerson = entry.toLocalURL();

							fileName = fileUrlPerson.split("/")[fileUrlPerson.split("/").length - 1];

							compressImage(entry.toLocalURL(), entry.name, divid);

						}, function(e) {
							plus.nativeUI.toast("读取拍照文件错误:" + e.message);
						});
						zm++;
						if(zm < e.files.length) {
							setTimeout(file, 200);
						}
					}

				}, function(e) {
					console.log("取消选择图片");
				}, {
					filename: "_doc/camera/",
					filter: "image",
					multiple: true
				});
			}

			//图片压缩
			function compressImage(url, filename, divid) {
				var name = "_doc/upload/" + divid + "-" + filename; //_doc/upload/F_ZDDZZ-1467602809090.jpg  

				plus.zip.compressImage({
						src: url, //src: (String 类型 )压缩转换原始图片的路径  
						dst: name, //压缩转换目标图片的路径  
						quality: 70, //quality: (Number 类型 )压缩图片的质量.取值范围为1-100  
						overwrite: true, //overwrite: (Boolean 类型 )覆盖生成新文件
						width: "200px",
						format: "jpg"
					},
					function(event) {
						//uploadf(event.target,divid);  
						var path = name; //压缩转换目标图片的路径  
						//event.target获取压缩转换后的图片url路  
						//filename图片名称  
						printLog(event.target, "压缩后的地址");

						saveImage(event.target, divid, filename, path);
						printLog("压缩图片")
					},
					function(error) {
						plus.nativeUI.toast("压缩图片失败，请稍候再试");
					});
			}

			function saveImage(url, divid, name, path) {
				var state = 0;

				hui.loading("正在上传图片");

				name = name.substring(0, name.indexOf(".")); //图片名称:1467602809090  
				var itemname = "img-" + divid; //429img-F_ZDDZ  
				var itemvalue = plus.storage.getItem(itemname);
				if(itemvalue == null) {
					itemvalue = "{" + name + "," + path + "," + url + "}"; //{IMG_20160704_112614,_doc/upload/F_ZDDZZ-IMG_20160704_112614.jpg,file:///storage/emulated/0/Android/data/io.dcloud...../doc/upload/F_ZDDZZ-1467602809090.jpg}  
				} else {
					itemvalue = itemvalue + "{" + name + "," + path + "," + url + "}";
				}

				//showImgDetail(name, divid, url);
				//hui.closeLoading();
				fileUrlPerson = url;
				uploadPic();
			}
			
			function uploadPic() {
				actionUrl = baseURL() + "/users_handler.ashx?action=user_img";
				//$("#picform").attr("action", actionUrl);
				var task = plus.uploader.createUpload(actionUrl, {
						method: "POST"
					},
					function(t, status) {
						// 上传完成  
						if(status == 200) {
							//printLog("修改头像成功");
							var resT = t.responseText;
							if(resT && resT.length > 0) {
								var ret = JSON.parse(resT);

								printLog(ret, "上传图片返回");

								if(!ret) {
									hui.toast("上传头像失败!解析错误");
									return;
								}

								if(ret.result == 0) {
									var reg = new RegExp("'", "g");
									var str = ret.data.replace(reg, "\"");
									var data = JSON.parse(str);
									var picUrl = data.path;
									datas.user.avatar = picUrl;

									save(true);
								} else {
									hui.toast("上传头像失败," + ret.msg || "");
								}

							} else {
								hui.toast("上传头像失败,返回为空!");
								return;
							}

						} else {
							hui.toast("上传头像失败");
							////printLog("Upload failed: " + status);
						}
					}
				);
				//printLog("------------------")				
				task.addFile(fileUrlPerson, {
					key: "Filedata",
					name: fileName
				});
				//task.addEventListener( "statechanged", onStateChanged, false );  
				task.start();
			}

			function setSensor() {
				hui.open("setSensor.html", {}, true, {});
			}
		</script>

	</body>

</html>